<template>
  <xui-bottom-popup ref="popupRef" closeable>
    <view class="sku">
      <view class="sku-header">
        <image class="goods-img" :src="info.img" />
        <view class="price">
          <!-- 1积分商品,2满减券, 3.抵扣券 -->
          <template v-if="[1, 2].includes(info.type)">
            <text class="number">{{ parseAmount(info.price1) }}</text>
            <text class="unit" v-if="info.price1 !== '免费'">积分</text>
          </template>

          <template v-if="info.type === 3">
            <text class="unit">¥</text>
            <text class="number">{{ parseAmount(info.price1) }}</text>
          </template>

          <text class="market-price">¥{{ parseAmount(info.price2) }}</text>
          <!-- <text class="tag">N元任选</text> -->
        </view>

        <view class="selected">{{ info.skuList?.join('丨') }}</view>
        <view class="stock">库存: {{ info.stock }}</view>
        <!-- <text class="selected">已选择: 奶油味120g</text> -->
      </view>

      <scroll-view class="sku-body" scroll-y>
        <!-- <view class="sku-list" v-for="(sku, skuIndex) in skuList" :key="skuIndex">
          <text class="sku-title">{{ sku.skuName }}</text>
          <view class="attribute-list">
            <text class="attribute-item" v-for="(attribute, attributeIndex) in sku.attributeList" :key="attributeIndex">{{
              attribute.attributeName }}</text>
          </view>
        </view> -->
      </scroll-view>

      <view class="sku-footer">
        <view class="number">
          <text class="title">购买数量</text>
          <xui-number-box :min="1" :disabled="numberDisabled" v-model="number" />
        </view>
        <button class="submit" @click="onSubmit">确认</button>
      </view>
    </view>
  </xui-bottom-popup>
</template>

<script>
import { ref } from 'vue'
import { parseAmount } from '@/utils/index'

export default {
  name: 'Sku',
  options: { styleIsolation: 'shared' },
  props: {
    // 数量选择器是否禁用
    numberDisabled: Boolean
  },
  emits: ['submit'],
  setup (_, { emit }) {
    const popupRef = ref(null)
    const open = (data) => {
      info.value = data
      number.value = 1

      popupRef.value.open()
    }
    const close = () => popupRef.value.close()

    const info = ref({
      img: '',
      price1: '',
      price2: '',
      skuList: [],
      stock: 0,
      type: '' // 1=积分商品, 2=满减券, 3=抵扣券
    })

    const number = ref(1)
    const onChangeValue = (value) => {
      number.value = value
    }

    const onSubmit = () => {
      emit('submit', { number: number.value })
      close()
    }
    const parseSku = (value) => {
      return value.replace(/[([\]")]/g, '')
    }
    return {
      parseAmount,
      parseSku,
      popupRef,
      open,
      close,

      info,

      number,
      onChangeValue,

      onSubmit
    }
  }
}
</script>

<style lang="scss">
.sku {
  .sku-header {
    height: 250rpx;
    position: relative;
    padding-left: 256rpx;
    padding-top: 48rpx;

    .goods-img {
      width: 200rpx;
      height: 200rpx;
      position: absolute;
      top: 32rpx;
      left: 32rpx;
      background: #e8f5ff;
      border-radius: 16rpx;
    }

    .price {
      display: flex;
      align-items: flex-end;

      .number {
        font-size: 48rpx;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #eb0028;
        line-height: 48rpx;
      }

      .unit {
        margin-left: 8rpx;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        color: #eb0028;
      }

      .tag {
        height: 40rpx;
        line-height: 40rpx;
        margin-left: 4rpx;
        padding: 0 8rpx;
        background: #fff1f1;
        border-radius: 4rpx;
        font-size: 26rpx;
        font-family: PingFangSC, PingFangSC-Medium;
        color: #eb0028;
      }
    }

    .market-price {
      display: block;
      margin-left: 10rpx;
      margin-top: 10rpx;
      font-size: 24rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      text-decoration: line-through;
      color: #cccccc;
      line-height: 32rpx;
    }

    .stock {
      margin-top: 56rpx;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      color: #2b2b2b;
      line-height: 32rpx;
    }

    .selected {
      height: 32rpx;
      display: block;
      margin-top: 16rpx;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      color: #999999;
      line-height: 32rpx;
    }
  }

  .sku-title {
    margin-right: 10rpx;
    margin-bottom: 40rpx;
    font-size: 26rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    color: #333333;
    line-height: 26rpx;
  }

  .sku-body {
    min-height: 303rpx;
    max-height: 530rpx;
    padding: 0 40rpx;

    .attribute-list {
      display: flex;
    }

    .sku-list,
    .attribute-list {

      .attribute-list {
        display: flex;
        flex-wrap: wrap;

        .attribute-item {
          height: 60rpx;
          line-height: 60rpx;
          margin-right: 20rpx;
          margin-bottom: 40rpx;
          padding: 0 20rpx;
          background: #f5f5f5;
          border-radius: 30rpx;
          font-size: 24rpx;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 600;
          color: #333;

          &.active {
            line-height: 58rpx;
            background: #e8f5ff;
            border: 1px solid #26a5ff;
            color: #26a5ff;
          }

          &.disabled {
            background: #f5f5f5;
            color: rgba(51, 51, 51, 0.2);
          }
        }
      }
    }
  }

  .sku-footer {
    // height: 252rpx;
    padding: 0 32rpx 20rpx;
    border-top: 1px solid #eaeaea;

    .number {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 56rpx;

      .title {
        font-size: 28rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        color: #333333;
        line-height: 40rpx;
      }
    }

    .submit {
      width: 686rpx;
      height: 80rpx;
      line-height: 80rpx;
      margin-top: 48rpx;
      background: #FF0057;
      border-radius: 40rpx;
      font-size: 28rpx;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      color: #ffffff;
    }
  }
}
</style>
